<template>
  <!--  <div class="img1">-->
  <div style="width: 100%; height: 400px">
    <div>
      <h1 style="color: #0a0a80">{{ title }}</h1>
    </div>
    <span>
      <div id="c1"></div>
      <div id="mountNode"></div>
    </span>
  </div>
  <!--  </div>-->
</template>

<script>
import { Chart } from "@antv/g2";

export default {
  name: "studentColumn",
  data() {
    return {
      user: JSON.parse(window.sessionStorage.getItem("user")),
      title: "本学期跑步公里数柱状图",

      basicColumnChartProp: {
        container: "c1",
        width: 1850,
        height: 500,
        padding: "auto",
      },
    };
  },

  methods: {
    test: function() {
      // Step 1: 创建 Chart 对象

      const chart = new Chart({
        container: this.basicColumnChartProp.container, // 指定图表容器 ID
        width: this.basicColumnChartProp.width, // 指定图表宽度
        height: this.basicColumnChartProp.height, // 指定图表高度
        padding: [20, 20, 50, 80],
      });

      // Step 2: 载入数据源
      this.getRequest("/clazz/" + this.user.clazz, {}).then((resp) => {
        chart.data(resp);

        chart.axis("mileageTerm1", {
          label: {
            formatter: (val) => {
              return +val + "miles";
            },
          },
        });

        chart.tooltip({
          showTitle: true,
          showCrosshairs: true,
        });

        // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
        chart
          .interval()
          .position("name*mileageTerm1")
          .color("name");

        // Step 4: 渲染图表
        chart.render();
      });
    },
  },

  mounted() {
    this.test();
  },
};
</script>

<style>
.img1 {
  width: 100%;
  height: 100%;

  background-size: 80% 100%;
}
</style>

<style scoped></style>
